{% set variant = variant|default('dark') %}
{% set content = pattern_configuration('code_block', variant, 'content') %}
{% set frame = pattern_configuration('code_block', variant, 'frame') %}
{% set active_tab = pattern_configuration('code_block', variant, 'active_tab') %}
<div
  x-data="{key: '{{ codes|first.key }}'}"
  class="border border-gray-300 relative overflow-hidden rounded-xl flex w-full">
  <div class="absolute inset-0 {{ frame }}"></div>
  <div class="relative w-full flex flex-col"
  >
    {% if hide_toolbar == false %}
    <div class="flex-none h-11 flex items-center px-4">
      <div class="flex space-x-1.5">
        <div class="w-3 h-3 border-2 rounded-full border-red-500"></div>
        <div class="w-3 h-3 border-2 rounded-full border-orange-500"></div>
        <div class="w-3 h-3 border-2 rounded-full border-green-500"></div>
      </div>
    </div>
    {% endif %}
    <ul class="flex text-sm {{ frame }} {{ codes|length == 1 ? 'hidden' }}" style="transform:translateY(0%) translateZ(0)">
      {%- for code_item in codes -%}
      <li class="flex-none">
        <button type="button"
                @click="key='{{ code_item.key }}'"
                class="border border-transparent py-2 px-4 font-medium focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-code-700 text-white"
              :class="{'{{ active_tab }}' : key === '{{ code_item.key }}'}">
          {{ code_item.title }}
        </button>
      </li>
      {% endfor %}
    </ul>
    <div class="{{ content }} relative border-t {% if variant == 'light'%} border-gray-300{% else %} border-white border-opacity-10 {% endif %} min-h-0 flex-auto flex flex-col"
         style="max-height: 450px"
    >
      <div class="w-full flex-auto flex min-h-0 overflow-auto scroll-container">
        {%- for code_item in codes -%}
          <div class="w-full relative flex-auto"
          x-show="key === '{{ code_item.key }}'"
          >
            {% if code_item.code is not empty %}
          <div class="flex text-xs md:text-sm">
            <div class="keep-markup flex relative block text-white w-full">
              <pre data-toolbar-order="{{ code_item.buttons }}" data-prismjs-copy class="code-block language-{{ code_item.format }}"><code>{{- code_item.code|trim -}}</code></pre>
            </div>
          </div>
            {% endif %}
            {% if code_item.image_url is not empty %}
              <img src="{{ file_url('ws-assets://' ~ code_item.image_url) }}" class="w-full">
            {% endif %}
            {% if code_item.content is not empty %}
              {{ code_item.content }}
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
